<template>
  <div>
    <v-card>
      <v-card-title>
        <v-btn color="info" @click="addBrand">新增</v-btn>

        <v-spacer/>
        <!--搜索框，与search属性关联-->
        <v-text-field label="输入关键字搜索" v-model="search" append-icon="search" hide-details/>
      </v-card-title>
      <v-divider/>

      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">
            <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
            <span v-else>无</span>
          </td>
          <td class="text-xs-center">{{ props.item.letter }}</td>

          <td class="text-xs-center">
            <v-btn color="info">编辑</v-btn>
            <v-btn color="warning">删除</v-btn>
          </td>
        </template>
      </v-data-table>
    </v-card>
    <!--弹出的对话框-->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>新增品牌</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
            <my-brand-form @close="closeWindow"></my-brand-form>
        </v-card-text>
      </v-card>
    </v-dialog>

  </div>

</template>

<script>
  import MyBrandForm from "./MyBrandForm"
    export default {
        name: "my-brand",
      data() {
        return {
          search: '', // 搜索过滤字段
          totalBrands: 0, // 总条数
          brands: [], // 当前页品牌数据
          loading: true, // 是否在加载中
          pagination: {}, // 分页信息
          headers: [ // 头信息
            {text: 'id', align: 'center', value: 'id'},
            {text: '名称', align: 'center', sortable: false, value: 'name'},
            {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
            {text: '首字母', align: 'center', value: 'letter', sortable: true},
            {text: '操作', align: 'center', value: 'id', sortable: false}
          ],
          //控制弹窗是否显示，默认不现实
          show:false
        }

      },
      methods: {
        getDataFromServer() { // 从服务的加载数据的方法。
          // // 伪造假数据
          // this.brands = [
          //   {id: 1, name: '三星', image: '', letter: 'S'},
          //   {id: 2, name: '三星', image: '123', letter: 'S'},
          //   {id: 3, name: '三星', image: '321', letter: 'S'},
          // ];
          this.$http.get("/item/brand/page",{
            params:{
              key: this.search, // 搜索条件
              page: this.pagination.page,// 当前页
              rows: this.pagination.rowsPerPage,// 每页大小
              sortBy: this.pagination.sortBy,// 排序字段
              desc: this.pagination.descending// 是否降序
            }
          })
            .then(resp=>{
              // 将得到的数据赋值给本地属性
              this.brands = resp.data.items;
              this.totalBrands = resp.data.total;
              // 完成赋值后，把加载状态赋值为false
              this.loading = false;
            }).catch(()=>{
              console.log("请求错误")
          })
        },
        addBrand(){
          this.show=true;
        },
        closeWindow(){

          this.show=false;

          //关闭新增窗口时重新加载数据
          getDataFromServer();
        }

      },
      mounted(){ // 挂载后执行
        // 查询数据
        this.getDataFromServer();
      },
      watch:{
          //当深度监控pagination中的属性变化后，重新发起请求加载数据
          pagination:{
            deep:true,
            handler(){
              this.getDataFromServer();
            }
          },
        search:{
          handler(){
            this.getDataFromServer();
          }
        }
      },

      components:{
        MyBrandForm
      }
    }
</script>

<style scoped>

</style>
